<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:if test="${map==null }">
	<jsp:forward page="shopServlet"></jsp:forward>
</c:if>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<title>叮咚易购</title>
<style type="text/css">
.slideBox {
	position: relative;
	width: 800px;
	height: 400px;
	overflow: hidden;
} /*里面的宽和高很具你自己的图片去设置*/
.items {
	position: absolute;
	float: left;
	background: none;
	list-style: none;
	padding: 0px;
	margin: 0px;
}

.items li {
	float: left;
	background: none;
	list-style: none;
	padding: 0px;
	margin: 0px;
}

.items li img {
	margin: 0px;
	padding: 0px;
	display: block;
	border: none;
}

.sgSlideBox {
	position: relative;
	width: 200px;
	height: 400px;
	overflow: hidden;
} /*里面的宽和高很具你自己的图片去设置*/
.sgItems {
	position: absolute;
	float: left;
	background: none;
	list-style: none;
	padding: 0px;
	margin: 0px;
}

.sgItems li {
	float: left;
	background: none;
	list-style: none;
	padding: 0px;
	margin: 0px;
}

.sgItems li img {
	margin: 0px;
	padding: 0px;
	display: block;
	border: none;
}

.hlSlideBox {
	position: relative;
	width: 200px;
	height: 400px;
	overflow: hidden;
} /*里面的宽和高很具你自己的图片去设置*/
.hlItems {
	position: absolute;
	float: left;
	background: none;
	list-style: none;
	padding: 0px;
	margin: 0px;
}

.hlItems li {
	float: left;
	background: none;
	list-style: none;
	padding: 0px;
	margin: 0px;
}

.hlItems li img {
	margin: 0px;
	padding: 0px;
	display: block;
	border: none;
}

.mySlideBox {
	position: relative;
	width: 200px;
	height: 400px;
	overflow: hidden;
} /*里面的宽和高很具你自己的图片去设置*/
.myItems {
	position: absolute;
	float: left;
	background: none;
	list-style: none;
	padding: 0px;
	margin: 0px;
}

.myItems li {
	float: left;
	background: none;
	list-style: none;
	padding: 0px;
	margin: 0px;
}

.myItems li img {
	margin: 0px;
	padding: 0px;
	display: block;
	border: none;
}

.topSkip {
	position: fixed;
	top: 80%;
	left: 90%;
}

.left_to {
	height: 399px;
	float: left;
	margin-left: 65px;
}

.left_to img {
	width: 205px;
	height: 400px;
}

.index_to_sgt {
	width:250px;
	height: 430px;
	float: left;
}

.index_to_sgt img {
	width:250px;
	height: 430px;
}

.index_to_sfs {
	width:250px;
	height: 430px;
	float: left;
}

.index_to_sfs img {
	width:240px;
	height: 420px;
}

.index_to_nf {
	width:250px;
	height: 430px;
	float: left;
}

.index_to_nf img {
	width:250px;
	height: 430px;
}
</style>
</head>
<body>
	<!--网页头部-->
	<header>
		<div class="soubg">
			<div class="sou fl">
				<div class="s_city_b">
					<span>送货至：四川</span>
				</div>
			</div>
			<div class="fr top_right">
				<div class="fl">
					你好! 请<a href="login.jsp">登录</a> <a href="register.jsp"
						style="color: ff4e00;">免费注册</a>&nbsp; | &nbsp;<a href="shop.jsp">我的订单</a>&nbsp;
					|
				</div>
			</div>
		</div>

		<div class="top">
			<div class="logo">
				<img src="images/logo.png" width="150" height="150" />
			</div>
			<div class="i_car">
				<div class="car_t">购物车</div>
			</div>
		</div>
	</header>
	<!--网页主题部分-->
	<section class="center clear">
		<!--商品列表、焦点图-->
		<div class="clear">
			<div class="menu_bg">
				<div class="menu">
					<!--Begin 商品分类详情 Begin-->
					<nav class="nav">
						<div class="nav_t">全部商品分类</div>
						<div class="leftNav">
							<!--左边购物列表导航-->
							<ul>
								<li>
									<div class="fj">

										<span class="n_img"><span></span><img
											src="images/${list.get(0).kUrl}" /></span> <span class="fl">${list.get(0).kName}</span>
									</div> <!--目前不显示，鼠标移入显示-->
									<div class="zj">
										<div class="zj_l">
											<div class="zj_r">
												<a href="subpage.jsp"><img src="images/n_img1.jpg"
													width="236" height="200" /></a> <a href="subpage.jsp"><img
													src="images/n_img2.jpg" width="236" height="200" /></a>
											</div>
										</div>
								</li>
								<li>
									<div class="fj">
										<span class="n_img"><span></span><img
											src="images/${list.get(1).kUrl}" /></span> <span class="fl">${list.get(1).kName}</span>
									</div>
									<div class="zj" style="top: -40px;">

										<div class="zj_r">
											<a href="subpage.jsp"><img src="images/n_img1.jpg"
												width="236" height="200" /></a> <a href="subpage.jsp"><img
												src="images/n_img2.jpg" width="236" height="200" /></a>
										</div>
									</div>
								</li>
								<li>
									<div class="fj">
										<span class="n_img"><span></span><img
											src="images/${list.get(2).kUrl}" /></span> <span class="fl">${list.get(2).kName}</span>
									</div>
									<div class="zj" style="top: -80px;">

										<div class="zj_r">
											<a href="subpage.jsp"><img src="images/n_img1.jpg"
												width="236" height="200" /></a> <a href="subpage.jsp"><img
												src="images/n_img2.jpg" width="236" height="200" /></a>
										</div>
									</div>
								</li>
								<li>
									<div class="fj">
										<span class="n_img"><span></span><img
											src="images/${list.get(3).kUrl}" /></span> <span class="fl">${list.get(3).kName}</span>
									</div>
									<div class="zj" style="top: -120px;">

										<div class="zj_r">
											<a href="subpage.jsp"><img src="images/n_img1.jpg"
												width="236" height="200" /></a> <a href="subpage.jsp"><img
												src="images/n_img2.jpg" width="236" height="200" /></a>
										</div>
									</div>
								</li>
								<li>
									<div class="fj">
										<span class="n_img"><span></span><img
											src="images/${list.get(4).kUrl}" /></span> <span class="fl">${list.get(4).kName}</span>
									</div>
									<div class="zj" style="top: -160px;">

										<div class="zj_r">
											<a href="subpage.jsp"><img src="images/n_img1.jpg"
												width="236" height="200" /></a> <a href="subpage.jsp"><img
												src="images/n_img2.jpg" width="236" height="200" /></a>
										</div>
									</div>
								</li>
								<li>
									<div class="fj">
										<span class="n_img"><span></span><img
											src="images/${list.get(5).kUrl}" /></span> <span class="fl">${list.get(5).kName}</span>
									</div>
									<div class="zj" style="top: -200px;">


										<div class="zj_r">
											<a href="subpage.jsp"><img src="images/n_img1.jpg"
												width="236" height="200" /></a> <a href="subpage.jsp"><img
												src="images/n_img2.jpg" width="236" height="200" /></a>
										</div>
									</div>
								</li>
								<li>
									<div class="fj">
										<span class="n_img"><span></span><img
											src="images/${list.get(6).kUrl}" /></span> <span class="fl">${list.get(7).kName}</span>
									</div>
									<div class="zj" style="top: -240px;">

										<div class="zj_r">
											<a href="subpage.jsp"><img src="images/n_img1.jpg"
												width="236" height="200" /></a> <a href="subpage.jsp"><img
												src="images/n_img2.jpg" width="236" height="200" /></a>
										</div>
									</div>
								</li>
								<li>
									<div class="fj">
										<span class="n_img"><span></span><img
											src="images/${list.get(8).kUrl}" /></span> <span class="fl">${list.get(8).kName}</span>
									</div>
									<div class="zj" style="top: -280px;">

										<div class="zj_r">
											<a href="subpage.jsp"><img src="images/n_img1.jpg"
												width="236" height="200" /></a> <a href="subpage.jsp"><img
												src="images/n_img2.jpg" width="236" height="200" /></a>
										</div>
									</div>
								</li>
								<li>
									<div class="fj">
										<span class="n_img"><span></span><img
											src="images/${list.get(9).kUrl}" /></span> <span class="fl">${list.get(9).kName}</span>
									</div>
									<div class="zj" style="top: -320px;">

										<div class="zj_r">
											<a href="subpage.jsp"><img src="images/n_img1.jpg"
												width="236" height="200" /></a> <a href="subpage.jsp"><img
												src="images/n_img2.jpg" width="236" height="200" /></a>
										</div>
									</div>
								</li>
								<li>
									<div class="fj">
										<span class="n_img"><span></span><img
											src="images/nav10.png" /></span> <span class="fl">礼品、充值</span>
									</div>
									<div class="zj" style="top: -360px;">
										<div class="zj_l"></div>
										<div class="zj_r">
											<a href="subpage.jsp"><img src="images/n_img1.jpg"
												width="236" height="200" /></a> <a href="subpage.jsp"><img
												src="images/n_img2.jpg" width="236" height="200" /></a>
										</div>
									</div>
								</li>
							</ul>
						</div>
					</nav>



					<!--End 商品分类详情 End-->
					<nav>
						<ul class="menu_r">
							<li><a name="topSkip">首页</a></li>
							<li><a href="#snacksSkip">蔬菜水果</a></li>
							<li><a href="#beautySkip">个人护理</a></li>
							<li><a href="#infantSkip">母婴玩具</a></li>
						</ul>
					</nav>

				</div>
			</div>
			<!--焦点图-->
			<div class="banner" id="banner">
				<div class="slideBox">
					<ul class="items ">
						<li><img src="images/sMask.jpg" width="760" height="420" /></li>
						<li><img src="images/sCoffee.jpg" width="760" height="420" /></li>
						<li><img src="images/sCar.jpg" width="760" height="420" /></li>
						<li><img src="images/sSix.jpg" width="760" height="420" /></li>
					</ul>

				</div>
			</div>
			<!--新闻列表-->
			<div class="left_to">
				<img alt="" src="images/left_to.jpg">
			</div>
		</div>

		<!--Begin 热门商品 Begin-->
		<div class="content clear ">
			<div class="hot">
				<div class="img">
					<a href="sidepageServlet?aid=${20}"><img
						src="images/sc0004.jpg" width="188" height="188" />
				</div>
				<div class="pri_bg">
					<span class="price fl">￥53.00</span> <span class="fr">16R</span> </a>
				</div>
			</div>
			<div class="hot_pro">
				<a href="sidepageServlet?aid=${21}">
					<div id="feature">
						<ul class="featureUL">
							<li class="featureBox">
								<div class="h_icon">
									<img src="images/hot.png" width="50" height="50" />
								</div>
								<div class="imgbg">
									<c:forEach items="${newmap.num1 }" var="num">
										<img src="${num.cUrl }" width="160" height="136" />
								</div>
								<div class="name">


									<h2>${num.cName }</h2>
									${num.cSpecial }
				</a>

			</div>
			<div class="price">
				<strong>￥<span>${num.cPrice }</span></strong> &nbsp; ${num.cSpection }
			</div>
			</c:forEach>
			</li>
			<li class="featureBox"><a href="sidepageServlet?aid=${22 }">
					<div class="h_icon">
						<img src="images/hot.png" width="50" height="50" />
					</div>
					<div class="imgbg">
						<c:forEach items="${newmap.num2 }" var="num">
							<img src="${num.cUrl }" width="160" height="136" />
					</div>
					<div class="name">


						<h2>${num.cName }</h2>
						${num.cSpecial }
			</a>
		</div>
		<div class="price">
			> <strong>￥<span>${num.cPrice }</span></strong> &nbsp;
			${num.cSpection }
		</div>
		</c:forEach>
		</li>
		<li class="featureBox"><a href="sidepageServlet?aid=${23 }">
				<div class="h_icon">
					<img src="images/hot.png" width="50" height="50" />
				</div>
				<div class="imgbg">
					<c:forEach items="${newmap.num3 }" var="num">
						<img src="${num.cUrl }" width="160" height="136" />
				</div>
				<div class="name">


					<h2>${num.cName }</h2>
					${num.cSpecial }
		</a>


			</div>
			<div class="price">
				<strong>￥<span>${num.cPrice }</span></strong> &nbsp; ${num.cSpection }
			</div> </c:forEach></li>
		<li class="featureBox"><a href="sidepageServlet?aid=${24 }">
				<div class="h_icon">
					<img src="images/hot.png" width="50" height="50" />
				</div>
				<div class="imgbg">
					<c:forEach items="${newmap.num4 }" var="num">
						<img src="${num.cUrl }" width="160" height="136" />
				</div>
				<div class="name">


					<h2>${num.cName }</h2>
					${num.cSpecial }
		</a>


			</div>
			<div class="price">
				<strong>￥<span>${num.cPrice }</span></strong> &nbsp; ${num.cSpection }
			</div> </c:forEach></li>
		</ul>
		</div>
		</div>
		</div>
		<!--Begin 进口 生鲜 Begin-->
		<section class="content clear">
			<div class="floorTitle ">
				<a name="snacksSkip"></a> <span class="fl">蔬菜水果</span>
			</div>
			<div class="main">
				<div class="fresh_left">
					<div id="banner_ss" class="banner_ss">
						<div class="sgSlideBox">
							<ul class="sgItems ">
								<li><img src="images/sg0006.jpg" width="200" height="400" /></li>
								<li><img src="images/sg0003.jpg" width="200" height="400" /></li>
								<li><img src="images/sc0006.jpg" width="200" height="400" /></li>
								<li><img src="images/sc0003.jpg" width="200" height="400" /></li>
								<li><img src="images/sc0001.jpg" width="200" height="400" /></li>
								<li><img src="images/sg0001.jpg" width="200" height="400" /></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="fresh_mid">
					<ul>
						<c:forEach items="${map.LP}" var="shop" varStatus="status">
							<li>
								<div class="name">
									<a href="#">${shop.sName}</a>
								</div>
								<div class="price">
									<span>￥${shop.sPrice}</span>
								</div>
								<div class="img">
									<a
										href="sidepageServlet?aid=${map.LP.get(status.index).getsId()}"><img
										src="images/${shop.sUrl}" width="185" height="155" /></a>
								</div>
							</li>
						</c:forEach>
					</ul>
				</div>					
			</div>
							<div class="index_to_sgt">
								<img alt="" src="images/index_sgt.jpg">
							</div>
		</section>
		<!--End 进口 生鲜 End-->

		<!--Begin 个人美妆 Begin-->
		<section class="content clear">
			<div class="floorTitle ">
				<a name="beautySkip"></a> <span class="fl">个人护理</span>
			</div>
			<div class="main">
				<div class="make_left">
					<div id="banner_hl" class="banner_hl">
						<div class="hlSlideBox">
							<ul class="hlItems ">
								<li><img src="images/sfs0006.jpg" width="200" height="400" /></li>
								<li><img src="images/sfs0003.jpg" width="200" height="400" /></li>
								<li><img src="images/myl0006.jpg" width="200" height="400" /></li>
								<li><img src="images/xs0003.jpg" width="200" height="400" /></li>
								<li><img src="images/xs0001.jpg" width="200" height="400" /></li>
								<li><img src="images/myl0001.jpg" width="200" height="400" /></li>
							</ul>
						</div>
					</div>

				</div>
				<div class="fresh_mid">
					<ul>
						<c:forEach items="${map.MZ}" var="shop" varStatus="status">
							<li>
								<div class="name">
									<a href="#">${shop.sName}</a>
								</div>
								<div class="price">
									<span>￥${shop.sPrice}</span>
								</div>
								<div class="img">
									<a
										href="sidepageServlet?aid=${map.MZ.get(status.index).getsId()}"><img
										src="images/${shop.sUrl}" width="185" height="155" /></a>
								</div>
							</li>
						</c:forEach>

					</ul>
				</div>

			</div>
			<div class="fresh_right">
				
							<div class="index_to_sfs">
								<img alt="" src="images/index_hl.jpg">
							</div>
			</div>
			</div>
		</section>
		<!--End 个人美妆 End-->

		<!--Begin 母婴玩具 Begin-->
		<section class="content">
			<div class="floorTitle">
				<a name="infantSkip"></a> <span class="fl">母婴玩具</span>
			</div>
			<div class="main">
				<div class="baby_left">
					<div id="banner_my" class="banner_my">
						<div class="mySlideBox">
							<ul class="myItems ">
								<li><img src="images/yyp0006.jpg" width="200" height="400" /></li>
								<li><img src="images/etwj0003.jpg" width="200" height="400" /></li>
								<li><img src="images/etwj0006.jpg" width="200" height="400" /></li>
								<li><img src="images/yec0003.jpg" width="200" height="400" /></li>
								<li><img src="images/yec0001.jpg" width="200" height="400" /></li>
								<li><img src="images/ymbdk0001.jpg" width="200"
									height="400" /></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="fresh_mid">
				<ul>
					<c:forEach items="${map.MY}" var="shop" varStatus="status">
						<li>
							<div class="name">
								<a href="#">${shop.sName}</a>
							</div>
							<div class="price">
								<span>￥${shop.sPrice}</span>
							</div>
							<div class="img">
								<a
									href="sidepageServlet?aid=${map.MY.get(status.index).getsId()}"><img
									src="images/${shop.sUrl}" width="185" height="155" /></a>
							</div>
						</li>
					</c:forEach>

				</ul>
			</div>
			<div class="fresh_right">
				<div class="index_to_nf">
								<img alt="" src="images/index_nf.jpg">
							</div>
			</div>
		</section>
		<!--End 母婴玩具 End-->


	</section>
	<h1 class="topSkip">
		<a href="#topSkip">回到顶部</a>
	</h1>
	<!--网页底部-->
	<footer class="center">
		<!-- Footer -->
		<div class="b_btm_bg b_btm_c">
			<ul class="b_btm">
				<li><a><img src="images/${listed.get(0).imgUrl}" width="62"
						height="62" /></a>
					<div>
						<h2>${listed.get(0).imgName}</h2>${listed.get(0).imgPosition}</div></li>
				<li><a><img src="images/${listed.get(1).imgUrl}"
						width="62" height="62" /></a>
					<div>
						<h2>${listed.get(1).imgName}</h2>${listed.get(1).imgPosition}</div></li>
				<li><a><img src="images/${listed.get(2).imgUrl}" width="62"
						height="62" /></a>
					<div>
						<h2>${listed.get(2).imgName}</h2>${listed.get(2).imgPosition}</div></li>
				<li><a><img src="images/${listed.get(3).imgUrl}" width="62"
						height="62" /></a>
					<div>
						<h2>${listed.get(3).imgName}</h2>${listed.get(3).imgPosition}</div></li>
			</ul>
		</div>
		<div class="b_nav">
			<dl>
				<dt>
					<a href="subpage.jsp">新手上路</a>
				</dt>
				<dd>
					<a href="subpage.jsp">售后流程</a>
				</dd>
				<dd>
					<a href="subpage.jsp">购物流程</a>
				</dd>
				<dd>
					<a href="subpage.jsp">订购方式</a>
				</dd>
				<dd>
					<a href="subpage.jsp">隐私声明</a>
				</dd>
				<dd>
					<a href="subpage.jsp">推荐分享说明</a>
				</dd>
			</dl>
			<dl>
				<dt>
					<a href="subpage.jsp">${newlist.get(0).qName}</a>
				</dt>
				<dd>
					<a href="subpage.jsp">${newlist.get(0).qPosition}</a>
				</dd>
				<dd>
					<a href="subpage.jsp">${newlist.get(0).qUrl}</a>
				</dd>
				<dd>
					<a href="subpage.jsp">${newlist.get(0).quse}</</a>
				</dd>
			</dl>
			<dl>
				<dt>
					<a href="subpage.jsp">${newlist.get(1).qName}</a>
				</dt>
				<dd>
					<a href="subpage.jsp">${newlist.get(1).qPosition}</a>
				</dd>
				<dd>
					<a href="subpage.jsp">${newlist.get(1).qUrl}</</a>
				</dd>
				<dd>
					<a href="subpage.jsp">${newlist.get(1).quse}</</a>
				</dd>
			</dl>
			<dl>
				<dt>
					<a href="subpage.jsp">${newlist.get(2).qName}</a>
				</dt>
				<dd>
					<a href="subpage.jsp">${newlist.get(2).qPosition}</a>
				</dd>
				<dd>
					<a href="subpage.jsp">${newlist.get(2).qUrl}</</a>
				</dd>
				<dd>
					<a href="subpage.jsp">${newlist.get(2).quse}</</a>
				</dd>
			</dl>
			<dl>
				<dt>
					<a href="subpage.jsp">${newlist.get(3).qName}</a>
				</dt>
				<dd>
					<a href="subpage.jsp">${newlist.get(3).qPosition}</a>
				</dd>
				<dd>
					<a href="subpage.jsp">${newlist.get(3).qUrl}</</a>
				</dd>
				<dd>
					<a href="subpage.jsp">${newlist.get(3).quse}</</a>
				</dd>
			</dl>
			<div class="b_tel_bg">
				<a href="subpage.jsp" class="b_sh1">新浪微博</a> <a href="subpage.jsp"
					class="b_sh2">腾讯微博</a>

				<p>
					服务热线：<br /> <span>400-124-4567</span>
				</p>
			</div>
			<div class="b_er">
				<div class="b_er_c">
					<img src="images/er.gif" />
				</div>
				<img src="images/ss.png" />
			</div>
		</div>
		<div class="btmbg">
			<div class="btm">
				<p>川ICP备133880号|合字A1.A2-20230003|营业执照</p>
				<p>Coperight&copy;叮咚易购2020-2024,All Right Reserved</p>
				<br /> <img src="images/b_1.gif" /> <img src="images/b_2.gif" /> <img
					src="images/b_3.gif" /> <img src="images/b_4.gif" /> <img
					src="images/b_5.gif" /> <img src="images/b_6.gif" />
			</div>
		</div>
		<!--Footer -->
	</footer>
</body>
<script>
    // 轮播图元素
    const carousel = document.getElementById('banner');
    const sgCarousel = document.getElementById('banner_ss');
    const images = carousel.getElementsByTagName('img');
    const sgImages = sgCarousel.getElementsByTagName('img');
    const hlCarousel = document.getElementById('banner_hl');
    const hlImages = hlCarousel.getElementsByTagName('img');
	const myCarousel = document.getElementById('banner_my');
    const myImages = myCarousel.getElementsByTagName('img');

    let currentIndex = 0;
    let sgCurrentIndex = 0;
    let hlCurrentIndex = 0;
    let myCurrentIndex = 0;
    // 下一张图片函数
    function nextImage() {
      images[currentIndex].style.display = 'none';
      currentIndex = (currentIndex + 1) % images.length;
      if(currentIndex >= images.length){
    	  currentIndex = 0 ;
      }
      images[currentIndex].style.display = 'block';
    } 
    function nextImages() {
        sgImages[sgCurrentIndex].style.display = 'none';
        sgCurrentIndex = (sgCurrentIndex + 1) % sgImages.length;
        if(sgCurrentIndex >= sgImages.length){
      	  sgCurrentIndex = 0 ;
        }
        sgImages[sgCurrentIndex].style.display = 'block';
      }
    function nextImageh() {
        hlImages[hlCurrentIndex].style.display = 'none';
        hlCurrentIndex = (hlCurrentIndex + 1) % hlImages.length;
        if(hlCurrentIndex >= hlImages.length){
        	hlCurrentIndex = 0 ;
        }
        hlImages[hlCurrentIndex].style.display = 'block';
      }
    function nextImagem() {
        myImages[myCurrentIndex].style.display = 'none';
        myCurrentIndex = (myCurrentIndex + 1) % myImages.length;
        if(myCurrentIndex >= myImages.length){
        	myCurrentIndex = 0 ;
        }
        myImages[myCurrentIndex].style.display = 'block';
      }

    // 自动轮播（每隔 3 秒切换下一张）
    setInterval(nextImage, 3000);
    setInterval(nextImages, 3000);
    setInterval(nextImageh, 3000);
    setInterval(nextImagem, 3000);
</script>
</html>
